<template>
  <div class="recommend" ref="recommend">
    <scroll class="recommend-content" :data="RecommendIndex" ref="scrollRecommend">
      <div>
        <!-- 轮播 -->
        <banner />
        <!-- 推荐歌单 -->
        <div class="recommend-list">
          <div class="list-tit w700" ref="innerRef">
            <span>推荐歌单</span>
            <router-link tag="div" class="musiclist" :to="{ name: 'square'}">歌单广场</router-link>
          </div>
          <van-loading
            v-show="!RecommendIndex.length"
            type="circular"
            color="#fff"
            vertical
          >加载推荐歌单...</van-loading>
          <!-- 横向列表 -->
          <scroll
            ref="scroll2"
            class="w700"
            :scrollX="true"
            :click="false"
            :pullup="pullup"
            @scrollToEndX="toSquareList"
            :listen-scroll="listenScroll"
            @scroll="scroll"
            :probeType="probeType"
          >
            <ul class="reul" ref="cont">
              <li
                v-for="(item,index) in RecommendIndex"
                class="item"
                :key="index"
                ref="box"
                @click.prevent="selectItem(item)"
              >
                <div class="imgcover" v-lazy:background-image="item.picUrl">
                  <p class="desc">
                    <i class="iconfont iconerji"></i>
                    <span>{{item.playCount | playNumFormat}}</span>
                  </p>
                </div>
                <div class="text">
                  <h2 class="name">{{item.name}}</h2>
                </div>
              </li>
              <div class="swiper-rightmore" v-show="RecommendIndex.length">
                <i class="iconfont icongetmorel"></i>
                <span>右滑获取更多</span>
              </div>
            </ul>
          </scroll>
        </div>
        <!-- 最新音乐 -->
        <div class="hostmusic-list">
          <div class="list-tit w700">
            <span class="circle">
              <div class="svg-wrap">
                <svg viewBox="0 0 10 10">
                  <defs>
                    <circle id="circle" cx="5" cy="5" r="4" stroke-width="0.5" fill="transparent" />
                  </defs>
                  <use xlink:href="#circle" stroke="#ffcd32" stroke-dasharray="0 2.09 8.38 30" />
                  <use xlink:href="#circle" stroke="#fff" stroke-dasharray="0 10.47 30" />
                  <use xlink:href="#circle" stroke="#dd001b" stroke-dasharray="2.09 16.75 6.3" />
                </svg>
                <i class="iconfont iconyinfu1"></i>
              </div>
              <i class="iconfont icongequ"></i>
              最新音乐
            </span>
            <!-- <div class="musiclist" @click="handle">音乐广场</div> -->
          </div>
          <van-loading v-show="!newSongs.length" type="circular" color="#fff" vertical>加载最新音乐...</van-loading>
          <newsong :data="this.newSongs" />
        </div>
        <!-- 登陆后私人推送 -->
        <div class="recommend-list djlist">
          <div class="list-tit w700">
            <span>
              <i class="iconfont iconMV" style="font-size:18px"></i>
              推荐Mv
            </span>
          </div>
          <van-loading v-show="!recommendMv.length" type="circular" color="#fff" vertical>加载推荐Mv...</van-loading>
          <!-- 横向列表 -->
          <swiper-scroll :data="recommendMv" class="w700"></swiper-scroll>
        </div>
        <van-divider :style="{ color: '#ffcd32', borderColor: '#ffcd32', padding: '0 16px' }">
          <i class="iconfont iconmaomi divicon"></i>
          俺是底线
        </van-divider>
      </div>
    </scroll>
  </div>
</template>

<script>
import Banner from "@/components/banner/banner";
import Newsong from "@/views/recommend/newSongs";
import SwiperScroll from "@/components/swiper/swiperScroll/horizontal";
import Scroll from "@/base/scroll/scroll";
import { getRecommend, getNewsong, getRecommendMv } from "@/request/api.js";
import { playListMixin } from "@/common/mixin.js";
import { createSearchSongs } from "@/common/song.js";
import { mapMutations } from "vuex";
import { Divider } from "vant";
import { mapGetters } from "vuex";
import Notify from "@/base/notify/notify";
export default {
  mixins: [playListMixin],
  data() {
    return {
      RecommendIndex: [],
      recommendMv: [],
      newSongs: [],
      pullup: true,
      pushcount: 0,
      // bs滚动的距离
      scrollX: -1
    };
  },
  computed: {
    ...mapGetters(["isLogin"]),
    innerWidth() {
      return this.$refs.innerRef.clientWidth;
    }
  },
  created() {
    this.listenScroll = true;
    this.probeType = 3;
    this.touch = {};
  },
  components: {
    Banner,
    Scroll,
    Newsong,
    Notify,
    SwiperScroll,
    [Divider.name]: Divider
  },
  activated() {
    this.$refs.scroll2.refresh();
    this.$refs.scrollRecommend.refresh();
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      // 获取推荐歌单
      const recommendData = await getRecommend({ limit: "6" });
      this.RecommendIndex = recommendData.result.slice(0, 6);
      this.verScroll();
      // 获取最新音乐
      const newSongsData = await getNewsong({ type: "recommend" });
      this.newSongs = this._normalizeSongs(newSongsData.result.slice(0, 9));
      // 获取推荐dj

      const { result: recommendMVData } = await getRecommendMv();
      this.recommendMv = recommendMVData;
      console.log(this.recommendMv);

      this.$refs.scrollRecommend.refresh();
    },
    scroll(pos) {
      // 获取betterscroll滚动的x轴距离
      this.scrollX = Math.abs(Math.round(pos.x));
      if (innerWidth < this.scrollX - 40) {
        this.$router.push({
          name: "square"
        });
      }
    },
    toSquareList() {
      console.log(this.scrollX);
      console.log(innerWidth);
      // console.log("a");
    },
    handlePlayList(playlist) {
      const bottom = playlist.length > 0 ? "60px" : "";
      this.$refs.recommend.style.bottom = bottom;
      this.$refs.scrollRecommend.refresh();
    },
    verScroll() {
      let resultPx = 2.8 * 75 + 0.3 * 75;
      let radio = document.body.clientWidth / 750;
      let li_w = resultPx * radio;
      let width = this.RecommendIndex.length * li_w;
      this.$refs.cont.style.width = width + "px";
      this.$nextTick(() => {
        this.$refs.scroll2.refresh();
      });
    },
    _normalizeSongs(list) {
      let ret = [];
      list.forEach(item => {
        if (item.id && item.song.album.id) {
          let temp = createSearchSongs(item.song);
          // api字段不统一，新增两个属性image代表图片，exclusive代表独家：
          temp.image = item.picUrl;
          temp.exclusive = item.song.exclusive;
          ret.push(temp);
        }
      });
      return ret;
    },
    selectItem(item) {
      console.log(typeof item);

      this.$router.push({
        name: "songsheet",
        query: { id: item.id }
      });
      this.setSonngSheet(item);
      this.setSongSheetType("歌单");
    },
    ...mapMutations({
      setSonngSheet: "SET_SONGSHEET",
      setSongSheetType: "SET_SONGSHEET_TYPE"
    })
  }
};
</script>

<style lang="less" scoped>
.divicon {
  margin-right: 6px;
}
.recommend {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;
  z-index: 66;
}
.recommend-content {
  height: 100%;
  overflow: hidden;
}
.list-tit {
  font-size: 16px;
  color: @mc;
  text-align: center;
  margin-top: 20px;
  .flex-nowrap-sb;
  margin-bottom: 10px;

  span {
    line-height: 20px;
    .flex-row-nowrap(center);
    &.circle {
      .svg-wrap {
        width: 32px;
        height: 32px;
        position: relative;
      }
      .iconyinfu1 {
        .posc;
        transform-style: preserve-3d;
        font-size: 14px;
        animation: rubberBand 5s linear 0s infinite;
        -webkit-animation: rubberBand 5s linear 0s infinite;
      }
      svg {
        width: 32px;
        height: auto;
        position: relative;
        animation: rotate 5s linear 0s infinite;
      }
    }
    > i {
      margin-right: 5px;
      position: relative;
      bottom: 2px;
    }
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rubberBand {
  0% {
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(90deg);
  }
  50% {
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(180deg);
  }
  75% {
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(270deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(360deg);
  }
}

.musiclist {
  padding: 0.2rem 0.4rem;
  border: 1px solid @mc;
  font-size: 12px;
  border-radius: 1.3333rem;
}
.reul {
  display: flex;
  // margin-top: 10px;
  // overflow-y: hidden;
  // overflow-x: scroll;
}
.recommend-list {
  .item {
    width: 2.8rem;
    flex: 0 0 2.8rem;
    position: relative;
    margin-right: 0.3rem;
    // &:last-child {
    //   margin-right: 0;
    // }
    .imgcover {
      width: 100%;
      height: 2.8rem;
      .bz(contain);
      border-radius: 0.2rem;
      position: relative;

      .desc {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 12px;
        .flex-row-nowrap(center);
        span {
          margin-left: 5px;
        }
      }
    }
    .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      line-height: 20px;
      overflow: hidden;
      font-size: @font-size-medium;
      .name {
        margin-top: 8px;
        color: @color-text;
        font-size: 14px;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
      }
      .desc {
        color: rgba(255, 255, 255, 0.3);
        font-size: 12px;
      }
    }
  }
}

.swiper-rightmore {
  height: 2.8rem;
  width: 50px;
  background-color: #2f2f2f;
  font-size: 14px;
  padding: 0 20px;
  color: #fff;
  border-radius: 0.2rem;
  .flex-column-mid;
  i {
    font-size: 12px;
  }
  span {
    font-size: 12px;
    margin-top: 5px;
  }
}
</style>